<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Backtop 回到顶部</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.diy-up{
	height: 100%;
	width: 100%;
	background-color: var(--el-bg-color-overlay);
	box-shadow: var(--el-box-shadow-lighter);
	text-align: center;
	line-height: 40px;
	color: #1989fa;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">通过滑动来查看容器右下角的按钮。</p>
	<p class="desc">返回页面顶部的操作按钮。</p>
	<el-backtop :right="100" :bottom="100"></el-backtop>
	
	<el-divider content-position="left">自定义内容</el-divider><!-- =============================================================== -->
	<p class="desc">显示区域被固定为 40px * 40px 的区域，其中的内容可支持自定义。</p>
	<el-backtop :bottom="100">
		<div class="diy-up">UP</div>
	</el-backtop>
	
	<div class="h1000"></div>
</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!'
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		}
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>